<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--让手机版生效-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shine课程表-导入课程</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/popper.min.js" type="module"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/styles/import_lesson.css" th:href="@{/styles/import_lesson.css}"/>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
</head>
<body>
<div class="root">
    <div id="bg"></div>
    <!--顶栏-->
    <div class="top_bar" th:include="top"></div>
    <!--主界面-->
    <div class="main container-fluid">
        <div class="row">
            <div class="col-sm-12" id="choose-login-type">
                <div class="login-button-div text-center" id="login-button-div">
                    <button type="button" class="btn btn-primary login-button" onclick="showLogin(0)">
                        <img class="login-type-logo" src="../static/images/lnu.webp" th:src="@{/images/lnu.webp}" alt="">
                        辽宁大学教务管理登录
                    </button><br>
                    <button type="button" class="btn btn-primary login-button"  onclick="showLogin(1)">
                        <img class="login-type-logo" src="../static/images/superlesson.webp" th:src="@{/images/superlesson.webp}" alt="">
                        超级课程表授权登录
                    </button><br>
                    <!--disabled类表示还未启用按钮-->
                    <button type="button" class="btn btn-default login-button disabled">
                        青果授权登录
                    </button><br>
                    <button type="button" class="btn btn-default login-button disabled">
                        课程适配联盟授权登录
                    </button><br>
                    <button type="button" class="btn btn-default login-button disabled">
                        更多院校登录
                    </button><br>
                </div>
                <hr/>
                <div class="text-center">
                    <div class="import-login-tips">
                        <p>Sunshine课程表Web端现已支持<b>辽宁大学教务管理登录</b>和<b>超级课程表模拟登录</b><p>
                        <p>在未来，还会支持更多方式登录</p>
                        <p>在现在，您还可以使用Sunshine课程表Android端，支持更多院校导入，体验更好:)</p>
                    </div>
                </div>
                <hr/>
            </div>

            <!--辽宁大学教务管理登录框-->
            <div class="import-login" id="import-login-0" th:hidden="hidden">
                <div class="row">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">
                        <div class="form-div">
                            <!--导入登录框-->
                            <form class="import-login-form form-horizontal" id="import-login-form-0" role="form">
                                <div class="login-top">
                                    登录辽宁大学教务管理
                                </div>
                                <hr/>
                                <div class="row import-form-group form-group">
                                    <label class="import-info-input-text col-sm-2 control-label text-center">账号</label>
                                    <div class="col-sm-10">
                                        <!--千万别把name忘记了，后面没法传递给后端！！！-->
                                        <input class="input-view form-control" id="userId-0" name="userId" type="text" placeholder="请输入教务管理账号">
                                    </div>
                                </div>
                                <div class="row import-form-group form-group">
                                    <label class="import-info-input-text col-sm-2 control-label text-center">密码</label>
                                    <div class="col-sm-10">
                                        <input class="input-view form-control" id="password-0" name="password" type="password" placeholder="请输入密码">
                                    </div>
                                </div>
                                <div class="import-form-button-div">
                                    <button type="button" class="btn btn-success import-button" onclick="toImportByLnu()">
                                        登录
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-sm-3"></div>
                </div>
            </div>

            <!--超级课程表登录框-->
            <div class="import-login" id="import-login-1" th:hidden="hidden">
                <div class="row">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">
                        <div class="form-div">
                            <!--导入登录框-->
                            <form class="import-login-form form-horizontal" id="import-login-form-1" role="form">
                                <div class="login-top">
                                    模拟登录超级课程表
                                </div>
                                <hr/>
                                <div class="row import-form-group form-group">
                                    <label class="import-info-input-text col-sm-2 control-label text-center">账号</label>
                                    <div class="col-sm-10">
                                        <!--千万别把name忘记了，后面没法传递给后端！！！-->
                                        <input class="input-view form-control" id="userId-1" name="userId" type="text" placeholder="请输入超级课程表账号">
                                    </div>
                                </div>
                                <div class="row import-form-group form-group">
                                    <label class="import-info-input-text col-sm-2 control-label text-center">密码</label>
                                    <div class="col-sm-10">
                                        <input class="input-view form-control" id="password-1" name="password" type="password" placeholder="请输入密码">
                                    </div>
                                </div>
                                <div class="import-form-button-div">
                                    <button type="button" class="btn btn-success import-button" onclick="toLoginBySuper()">
                                        登录
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-sm-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    // window.onload = function () {
    //     Swal.fire({
    //         title: '领取你的寻龙装备！',
    //         input: 'select',
    //         html:
    //             '<input id="swal-input1" class="swal2-input">' +
    //             '<input id="swal-input2" class="swal2-input">',
    //         inputAttributes: {
    //             autocapitalize: 'off'
    //         },
    //         showCancelButton: true,
    //         confirmButtonText: 'Look up',
    //         showLoaderOnConfirm: true,
    //         preConfirm: (login) => {
    //             return fetch(`//api.github.com/users/${login}`)
    //                 .then(response => {
    //                     if (!response.ok) {
    //                         throw new Error(response.statusText)
    //                     }
    //                     return response.json()
    //                 })
    //                 .catch(error => {
    //                     Swal.showValidationMessage(
    //                         `Request failed: ${error}`
    //                     )
    //                 })
    //         },
    //         allowOutsideClick: () => !Swal.isLoading()
    //     }).then((result) => {
    //         if (result.value) {
    //             Swal.fire({
    //                 title: `${result.value.login}'s avatar`,
    //                 imageUrl: result.value.avatar_url
    //             })
    //         }
    //     })
    // };
    function showLogin(type) {
        //jquery等待界面加载好后再执行
        //这个函数经过了很长时间的处理，看看吧
        $(function () {
            const importLogin = $("#import-login-" + type);

            //如果有显示的那就隐藏，i是现在支持导入的方式
            for (let i = 0; i < 2; i++) {
                const tempImportLogin = document.getElementById("import-login-" + i);
                if (!tempImportLogin.hidden && i != type) {
                    tempImportLogin.hidden = true;
                    $("#import-login-" + i).removeClass("col-sm-8");
                    $("#choose-login-type").removeClass("col-sm-4").addClass("col-sm-12");
                    break;
                }
            }

            if (importLogin[0].hidden) {
                //注意jquery获取控件要用数组
                //更改类名来通过bootstrap修改宽度
                importLogin.addClass("col-sm-8");
                $("#choose-login-type").removeClass("col-sm-12").addClass("col-sm-4");
                importLogin[0].hidden = false;
                //对移动端的优化，选择登录后直接跳转到登录窗口的位置
                location.href = "#import-login-" + type;
            } else {
                importLogin.removeClass("col-sm-8");
                $("#choose-login-type").removeClass("col-sm-4").addClass("col-sm-12");
                importLogin[0].hidden = true;
            }
        })
    }

    //辽宁大学教务管理登录
    function toImportByLnu() {
        //等待界面加载好后执行
        $(function () {
            const userId = $("#userId-0").val();
            const password = $("#password-0").val();
            if (userId == null || userId.length <= 0) {
                Swal.fire('提示', '请输入辽宁大学教务管理账号', 'error');
            } else if (password == null || password.length <= 0) {
                Swal.fire('提示', '请输入密码', 'error');
            } else {
                Swal.fire({
                    title: '请稍后',
                    text: '正在验证登录信息...',
                    showConfirmButton: false,
                    showCancelButton: false,
                    showLoaderOnConfirm: true
                });
                $.ajax({
                    type: 'POST',
                    url: '/import_lesson_by_lnu',
                    data: $("#import-login-form-0").serialize(),
                    success: function (result) {
                        $(".swal2-center").css("display", "none");
                        switch (result.resultCode) {
                            case 200:
                                Swal.fire('成功', '解析课表成功', 'success');
                                break;
                            case 400:
                                //用户错误
                            case 501:
                                //拒绝访问
                                Swal.fire('错误', result.message, 'error');
                                break;
                            default:
                                Swal.fire('错误', '服务器出现问题', 'error');
                                break;
                        }
                    },
                    error: function () {
                        $(".swal2-center").css("display", "none");
                        Swal.fire('错误', '验证登录时出现问题', 'error');
                    }
                })
            }
        })
    }

    //超级课程表登录
    function toLoginBySuper() {
        //等待界面加载好后执行
        $(function () {
            const userId = $("#userId-1").val();
            const password = $("#password-1").val();
            if (userId == null || userId.length <= 0) {
                Swal.fire('提示', '请输入超级课程表账号', 'error');
            } else if (password == null || password.length <= 0) {
                Swal.fire('提示', '请输入密码', 'error');
            } else {
                Swal.fire({
                    title: '请稍后',
                    text: '正在验证登录信息...',
                    showConfirmButton: false,
                    showCancelButton: false,
                    showLoaderOnConfirm: true
                });
                $.ajax({
                    type: 'POST',
                    url: '/login_by_super',
                    data: $("#import-login-form-1").serialize(),
                    success: function (result) {
                        $(".swal2-center").css("display", "none");
                        switch (result.resultCode) {
                            case 200:
                                console.log(result.myData);
                                //超表学期信息
                                const superList = result.myData;
                                //获取到学期的长度为0可能是登录失败或者没有在超表中导入课程
                                if (superList.length <= 0) {
                                    Swal.fire('错误', '超级课程表的账号或密码错误或者没有在超级课程表中导入过课程', 'error');
                                } else {
                                    let htmlString = '';
                                    for (let i = 0; i < superList.length; i++) {
                                        htmlString += '<button type="button" class="btn btn-primary login-button" onclick="toImportBySuper(' + i + ')">';
                                        htmlString += superList[i].beginYear + '年第' + superList[i].term + '学期';
                                        htmlString += '</button><br>'
                                    }
                                    Swal.fire({
                                        title: '<b>请选择要导入的学期</b>',
                                        html:
                                        htmlString,
                                        showConfirmButton: false
                                    });
                                }
                                break;
                            case 400:
                            //用户错误
                            case 501:
                                //拒绝访问
                                Swal.fire('错误', result.message, 'error');
                                break;
                            default:
                                Swal.fire('错误', '服务器出现问题', 'error');
                                break;
                        }
                    },
                    error: function () {
                        $(".swal2-center").css("display", "none");
                        Swal.fire('错误', '验证登录时出现问题', 'error');
                    }
                })
            }
        })
    }

    function toImportBySuper(which) {
        console.log(which);
        Swal.fire({
            title: '请稍后',
            text: '正在从导入课程...',
            showConfirmButton: false,
            showCancelButton: false,
            showLoaderOnConfirm: true
        });
        $.ajax({
            type: 'POST',
            url: '/import_lesson_by_super',
            dataType:'json',
            data: {which:which},
            success: function (result) {
                $(".swal2-center").css("display", "none");
                switch (result.resultCode) {
                    case 200:
                        Swal.fire('成功', '解析课表成功', 'success');
                        break;
                    case 400:
                    //用户错误
                    case 501:
                        //拒绝访问
                        Swal.fire('错误', result.message, 'error');
                        break;
                    default:
                        Swal.fire('错误', '服务器出现问题', 'error');
                        break;
                }
            },
            error: function () {
                $(".swal2-center").css("display", "none");
                Swal.fire('错误', '验证登录时出现问题', 'error');
            }
        })
    }
</script>
</html>